<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Demo</title>
<script src="${basePath}jQuery Core 1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   //获取ajax引擎对象
   function getAjaxEngine(){
	   //ajaxajax引擎对象
	   var ajaxEngine=null;
	   //使用异常处理机制获取不同浏览器下的ajax引擎对象
	   try{
		   //ff  op   safari浏览器ajax引擎
		   ajaxEngine=new XMLHttpRequest();
		   
	   }catch(e){
		   //尝试IE浏览器
		   try{
			   xmlHttpR=new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			   xmlHttpR=new ActiveXObject("Microsoft.XMLHTTP");
		   }
	   }
	   //返回ajax引擎对象
	   return ajaxEngine;
   }
   
   //定义一个全局的ajax引擎对象
   var ajaxEngine=null;
   //ajax处理函数
   function doPostAjax(){
	 //  获取ajax引擎对象
	   ajaxEngine=getAjaxEngine();
	 
	//获取成功之后，进行ajax请求处理
		if (ajaxEngine) {
			//请求的服务器连接（和form表单的action属性一样）
			var url = "${basePath}AjaxDemoServlet";
			//打开ajax引擎对象：第一参数是指明http请求的方式get/post
			//第二个参数：请求的服务器连接；第三个参数：是否采用异步处理
			ajaxEngine.open("post", url, true);
			//组织post方式ajax请求发送给服务器的数据内容：变量名=变量值&变量名=变量值
			var date = "txtName=" + document.getElementById("txtName").value
					+ "&txtAge=" + document.getElementById("txtAge").value
			//设置post方式ajax请求的content-type
			ajaxEngine.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			//发送ajax请求
			ajaxEngine.send(date);
			//设置ajax请求后的回调函数
			ajaxEngine.onreadystatechange = doCallBack;
		}
		//ajax回调函数
		function doCallBack() {
			//ajax引擎对象状态已完成
			if (ajaxEngine.readyState == 4) {
				//判定服务器状态：200表示服务器响应成功
				if (ajaxEngine.status == 200) {
					alert("获取的服务器响应内容：" + ajaxEngine.responseText)
				} else {
					alert("出现错误：" + ajaxEngine.status);
				}
			}
		}
	}
</script>
<script type="text/javascript">
function doJqueryAjax(){
	$.ajax({
		type:"POST",//请求的类型get/post
		url:"${basePatch}AjaxDemoServlet",//服务器url
		//async:true,//是否是进行异步 默认是true
		dataType:"text",//服务器返回的数据类型
		/*data: "txtName=" + $("#txtName").val()
		+"&txtAge=" +$("#txtAge").val,*/ //发送给服务器的数据
		data:$("#myForm").serialize(),
		success: function(data){  //成功之后的回调函数
			alert("Data Saved: "+data);
		}
	});
}
</script>
</head>
<body>
	<form id="myForm">
		姓名：<input type="text" id="txtName" name="txtName"> 年龄：<input
			type="text" id="txtAge" name="txtAge"> 
			<input type="button"
			value="原生态的ajax" onclick="doPostAjax()">
			<input type="button"
			value="Jquery的ajax" onclick="doJqueryAjax()">
	</form>
</body>
</html>